/**
 * Created by 小敏哥 on 2017/3/22.
 */
import React, { Component } from 'react';
import IconText from '../calculatorOfYearlyCheck/iconText';
import { Link } from 'react-router'
import { Toast } from 'antd-mobile';
import style from './carNumberItem.scss';
import SendCxytjMessage from '../../utils/sendCxytjMessage';

class CarNumberItem extends Component {
    constructor(props) {
        super(props);
        this.showMessage = this.showMessage.bind(this);
        this.turnToUpdate = this.turnToUpdate.bind(this);
    }

    carMessageDictionary(state, bizFlag) {
        const n = bizFlag == '1' ? '，仍可免检' : '，需上线检测';
        switch (state) {
            case -1:
                return {
                    message: '该车辆距年检预约还有',
                    content: ''
                };
            case 0:
                return {
                    message: '该车辆距年检预约还有', 
                    content: ''
                };
            case 1:
                return {
                    message: '该车辆距年检有效期截止还剩', 
                    content: ''
                };
            case 2:
                return {
                    message: '该车辆已逾期',
                    messageEnd: n,
                    content: bizFlag == '1' ? '车辆已逾期且未按规定在检验有效期内完成年检，请您尽快处理。否则车辆将面临扣分和有事故不能出险的风险' : '车辆年检已逾期，请您在年检有效期内办完年检，否则车辆将面临扣分和有事故不能出险的风险'
                };
            case 3:
                return {
                    message: '该车辆已逾期',
                    messageEnd: n,
                    content: bizFlag == '1' ? '车辆已逾期且未按规定在检验有效期内完成年检，请您尽快处理。否则车辆将面临扣分和有事故不能出险的风险' : '车辆年检已逾期，请您在年检有效期内办完年检，否则车辆将面临扣分和有事故不能出险的风险。'
                };
            case 4:
                return {
                    message: '该车辆已严重逾期(连续逾期两次)', 
                    content: '车辆已连续两次年检逾期，请您在下一次年检有效期之内完成车辆' + bizFlag == '1' ? '免检检测' : '上线检测' + '，不然车辆将直接报废。'
                };
            case 5:
                return {
                    message: '该车辆已报废，请勿驾驶', 
                    content: '车辆未按规定在检验有效期内完成年检，并且逾期次数已连续超过3次。按我国机动车相关法规《机动车强制报废标准》的规定，车辆已达强制报废条件。请勿再驾驶此车上路，否则将被收缴并面临和吊销驾驶证的处罚。'
                };
            case 6:
                return {
                    message: '该车年检正在办理中', 
                    content: '年审订单办理中'
                };
            case 7:
                return {
                    message: '初登日期大于4年',
                    content: '抱歉，该车辆登记至今已超过4年，不符合免检政策，暂无法在线办理'
                };
            case 8:
                return {
                    message: '车辆状态异常', 
                    content: '抱歉，该车辆状态异常，不符合免检政策，暂无法在线办理'
                };
            case 9:
                return {
                    message: '使用性质不合要求',
                    content: '抱歉，该车辆使用性质不符合免检政策，暂无法在线办理'
                };
            case 10:
                return {
                    message: '核定载客人数不合要求',
                    content: '抱歉，该车辆核定载客人数不符合免检政策，暂无法在线办理'
                };
            case 11:
                return {
                    message: '车辆类型不合要求',
                    content: '抱歉，该车辆类型不符合免检政策，暂无法在线办理'
                };
        }
    }

    showMessage(e) {
        Toast.info(this.carMessageDictionary(this.props.state).content, 3);
        //埋点数据发送
        /* window.cxytj.recordUserBehavior({
             eventId: 'insepection_showWarning',
             eventType: '2', //事件类型
             eventTime: '',  //触发时间
         });*/
        //阻止事件继续冒泡
        e.stopPropagation();
    }

    //添加埋点并阻止冒泡
    turnToUpdate(e) {
        //埋点数据发送
        SendCxytjMessage.sendMessage({ eventId: 'H5_E_Interspection_Homepage_ClickEditCarData' });
        e.stopPropagation();
    }


    contentClass() {
        if (this.props.state < 4) {
            return style.content;
        }
        else {
            return style.singleContent;
        }
    }

    //添加车牌样式
    carNumberStyle(carNumber) {
        let left = carNumber.substr(0, 2);
        let right = carNumber.substr(2, carNumber.length - 2);
        return left + ' ' + right;
    }

    render() {
        const {onClick,carNumber,state,carId,bizFlag,days,remainingTime}=this.props
        return <div className={style.container} onClick={onClick}>
            <div className={style.title}>
                <IconText imgUrl="./images/carNumber.png" text={this.carNumberStyle(carNumber)} />
                {state != 6 ? <Link className={style.imgLink} to={`/UpdateCarInfo/${encodeURIComponent(carNumber)}/${carId}`} onClick={this.turnToUpdate}>
                    <img className={style.editImg} src="./images/icon_edit.png" />
                </Link> : ''}
            </div>
            <div className={this.contentClass()}>
                <span>{this.carMessageDictionary(state, bizFlag).message}</span>
                {(state < 2 && state != -1) ? <span>{days}</span> : ''}{/*可能出现车辆状态未知但能从中大获取到信息的情况，故检测到0时显示问号*/}
                {(state >= 2 && state != -1 && state < 4) ?
                    <span className={style.warnningText}>{days}</span> : ''}
                {(state == -1) ? <span>?</span> : ''}
                {(state < 4) ? < span > 天 </ span > : ''}
                {this.carMessageDictionary(state, bizFlag).messageEnd?<span className={style.lastSpan}>{this.carMessageDictionary(state, bizFlag).messageEnd}</span>:''}
                {state >= 2 ? <img onClick={this.showMessage} src="./images/icon_warn_bule.png" /> : ''}
            </div>
        </div>
    }
}
//使用context
CarNumberItem.contextTypes = {
    router: React.PropTypes.object.isRequired
};

export default CarNumberItem